<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>用户登录</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.5;
        }

        .login-container {
            max-width: 100%;
            width: 100%;
            padding: 20px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .logo {
            width: 80px;
            height: 80px;
            margin-bottom: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
        }

        .login-form {
            width: 100%;
            max-width: 400px;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }

        .form-control {
            width: 100%;
            height: 44px;
            padding: 0 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .form-control:focus {
            border-color: #1890ff;
            outline: none;
        }

        .error-message {
            color: #f5222d;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .login-btn {
            width: 100%;
            height: 44px;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
            position: relative;
        }

        .login-btn:hover {
            background-color: #40a9ff;
        }

        .login-btn:disabled {
            background-color: #d9d9d9;
            cursor: not-allowed;
        }

        .loading-spinner {
            display: none;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .remember-me {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .remember-me input {
            margin-right: 8px;
        }

        .password-wrapper {
            position: relative;
        }

        .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="logo"><img src="img/logo.png" style="width: 400px;"/></div>

        <form class="login-form" id="loginForm">
            <div class="form-group">
                <label for="account">账号</label>
                <input type="text" id="account" class="form-control" placeholder="请输入账号">
                <div class="error-message" id="accountError">请输入账号</div>
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <div class="password-wrapper">
                    <input type="password" id="password" class="form-control" placeholder="请输入密码">
                    <span class="toggle-password">👁️</span>
                </div>
                <div class="error-message" id="passwordError">请输入密码</div>
            </div>

            <div class="remember-me">
                <input type="checkbox" id="rememberMe">
                <label for="rememberMe">记住我</label>
            </div>

            <button type="button" class="login-btn" id="loginBtn">
                <span class="btn-text">登录</span>
                <span class="loading-spinner"></span>
            </button>
        </form>
    </div>

    <script>
        $(document).ready(function() {
            // 初始化记住的账号密码
            if (Cookies.get('rememberAccount') === 'true') {
                $('#rememberMe').prop('checked', true);
                $('#account').val(Cookies.get('savedAccount') || '');
                $('#password').val(Cookies.get('savedPassword') || '');
            }

            // 密码显示/隐藏切换
            $('.toggle-password').click(function() {
                const $password = $('#password');
                const type = $password.attr('type');
                $password.attr('type', type === 'password' ? 'text' : 'password');
                $(this).text(type === 'password' ? '🙈' : '👁️');
            });

            // 表单验证函数
            function validateForm() {
                var isValid = true;

                // 验证账号
                if (!$('#account').val().trim()) {
                    $('#accountError').show();
                    isValid = false;
                } else {
                    $('#accountError').hide();
                }

                // 验证密码
                if (!$('#password').val().trim()) {
                    $('#passwordError').show();
                    isValid = false;
                } else {
                    $('#passwordError').hide();
                }

                return isValid;
            }

            // 输入框实时验证
            $('#account').on('input', function() {
                if ($(this).val().trim()) {
                    $('#accountError').hide();
                }
            });

            $('#password').on('input', function() {
                if ($(this).val().trim()) {
                    $('#passwordError').hide();
                }
            });

            // 显示加载动画
            function showLoading() {
                $('#loginBtn .btn-text').hide();
                $('#loginBtn .loading-spinner').show();
            }

            // 隐藏加载动画
            function hideLoading() {
                $('#loginBtn .btn-text').show();
                $('#loginBtn .loading-spinner').hide();
            }

            // 登录按钮点击事件
            $('#loginBtn').click(function() {
                if (!validateForm()) {
                    return;
                }

                // 禁用按钮防止重复提交
                var $btn = $(this);
                $btn.prop('disabled', true);
                showLoading();

                // 获取账号密码
                var account = $('#account').val().trim();
                var password = $('#password').val().trim();

                // 记住我功能
                if ($('#rememberMe').is(':checked')) {
                    Cookies.set('rememberAccount', 'true', { expires: 7 }); // 记住7天
                    Cookies.set('savedAccount', account, { expires: 7 });
                    Cookies.set('savedPassword', password, { expires: 7 }); // 注意：实际项目中建议加密存储
                } else {
                    Cookies.remove('rememberAccount');
                    Cookies.remove('savedAccount');
                    Cookies.remove('savedPassword');
                }

                // AJAX请求
                $.ajax({
                    url: '/renren-admin/prd/front/login',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        account: account,
                        password: password
                    }),
                    success: function(data) {
                        // 登录成功处理
                        if (data.code === 0) { // 假设接口返回code为0表示成功
                            // 跳转到首页或其他页面
                            window.location.href = 'home.html';
                        } else {
                            alert(data.msg || '登录失败');
                            $btn.prop('disabled', false);
                            hideLoading();
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('登录错误:', error);
                        var errorMsg = '登录失败，请稍后重试';
                        if (xhr.responseJSON && xhr.responseJSON.msg) {
                            errorMsg = xhr.responseJSON.msg;
                        }
                        alert(errorMsg);
                        $btn.prop('disabled', false);
                        hideLoading();
                    }
                });
            });

            // 表单回车提交
            $('#loginForm').on('keypress', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    $('#loginBtn').click();
                }
            });
        });
    </script>
</body>
</html>
